<template>
	<transition class="fade">
		<div v-if="show" class="A-loading">
			<div class="loading">
				<div class="dot" v-for="(item, index) in dot"></div>
			</div>
		</div>
	</transition>
</template>

<script>
	import { ref } from '@vue/composition-api';
	export default {
		setup(props, ctx) {
			let dot = ref(18);
			let show = ctx.attrs?.show ?? ref(false);
			return { dot, show };
		},
	};
</script>

<style lang="scss" scoped>
	.fade-move {
		transition: all 0.3s ease;
	}
	.fade-enter,
	.fade-leave-to {
		opacity: 0;
	}
	.A-loading {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: 2000000;
		background-color: hsla(0, 0%, 100%, 0.9);
		transition: opacity 0.3s;
		display: flex;
		justify-content: center;
		align-items: center;
		.loading {
			$loadingsize: 100px;
			$dotSize: 10px;
			$n: 18;
			$pDeg: 360deg / $n;
			$d: 3s;
			width: $loadingsize/2 + $dotSize/2;
			height: $loadingsize;
			border-radius: calc(infinity * 1px);
			position: relative;
			.dot {
				width: $dotSize;
				height: $dotSize;
				position: absolute;
				left: calc(50% - $dotSize/2);
				top: -$dotSize * 1.5;
				transform-origin: center $loadingsize/2 + $dotSize/2;
				perspective: 70px;
				transform-style: preserve-3d;
				&::before,
				&::after {
					content: '';
					position: absolute;
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
			}
			.dot::before {
				background-color: rgb(207, 157, 20);
				position: absolute;
				top: -100%;
				left: calc(50% - $dotSize/2);
				border-radius: calc(infinity * 1px);
				animation: rotation-black $d linear infinite;
			}
			.dot::after {
				background-color: rgb(41, 155, 84);
				top: 100%;
				left: calc(50% - $dotSize/2);
				border-radius: calc(infinity * 1px);
				animation: rotation-white $d linear infinite;
			}
			@for $i from 0 to $n {
				.dot:nth-child(#{$i}) {
					transform: rotate($pDeg * $i);
				}
				.dot:nth-child(#{$i})::before,
				.dot:nth-child(#{$i})::after {
					animation-delay: -$d / $n * $i * 6;
				}
			}
		}
	}
	@keyframes rotation-black {
		0% {
			animation-timing-function: ease-in;
		}
		25% {
			transform: translate3d(0, 100%, 20px);
			animation-timing-function: ease-out;
		}
		50% {
			transform: translate3d(0, 200%, 0);
			animation-timing-function: ease-in;
		}
		75% {
			transform: translate3d(0, 100%, -20px);
			animation-timing-function: ease-out;
		}
	}
	@keyframes rotation-white {
		0% {
			animation-timing-function: ease-in;
		}
		25% {
			transform: translate3d(0, -100%, -20px);
			animation-timing-function: ease-out;
		}
		50% {
			transform: translate3d(0, -200%, 0);
			animation-timing-function: ease-in;
		}
		75% {
			transform: translate3d(0, -100%, 20px);
			animation-timing-function: ease-out;
		}
	}
</style>
